<template>
  <nav>
    <div class="container">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
               background-color="#090723"
               text-color="#fff"
               active-text-color="#fff"

      >
        <slot></slot>
      </el-menu>
    </div>
  </nav>
</template>

<script>
    export default {
        name: "MenuComponent",
      props: {
        activeIndex: {
          type: String,
          required: true
        },
      },
      data(){
          return{
          }
      },
      methods: {
        handleSelect(key) {
          console.log(key)
          this.$router.push({path:key })
        },

      }
    }
</script>

<style scoped>

  .el-menu.el-menu--horizontal{
    border-bottom: none;
  }


</style>
